<template>
  <a-row :gutter="24">
    <a-col :span="12" :gutter="[16, 16]">
      <div :id="`chartPie${paneData.taskInfo.id}`" style="height: 350px"></div>
    </a-col>
    <a-col :span="12" :gutter="[16, 16]">
      <div :id="`chartBar${paneData.taskInfo.id}`" style="height: 350px"></div>
    </a-col>
    <a-col :span="24" :gutter="[16, 16]">
      <div
        :id="`chartBarFacility${paneData.taskInfo.id}`"
        style="height: 350px"
      ></div>
    </a-col>
    <a-col :span="24" :gutter="[16, 16]">
      <div
        :id="`chartBarSource${paneData.taskInfo.id}`"
        style="height: 350px"
      ></div>
    </a-col>
  </a-row>
</template>

<script>
// import { ListMixin } from "@/mixins/ListMixin";
export default {
  name: "AnalysisChart",
  // mixins: [ListMixin],
  props: ["paneData"],
  data() {
    return {
      graphic: [
        {
          normal: {
            color: new this.$echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
              [
                { offset: 0, color: "#81d2fb" },
                { offset: 0.5, color: "#3dbaf9" },
              ] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
            ),
          },
        },
        {
          normal: {
            color: new this.$echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
              [
                { offset: 0, color: "#d2e3f1" },
                { offset: 0.5, color: "#bdc9e2" },
              ] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
            ),
          },
        },
        {
          normal: {
            color: new this.$echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
              [
                { offset: 0, color: "#85f0f5" },
                { offset: 0.5, color: "#85f0d5" },
              ] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
            ),
          },
        },{
          normal: {
            color: new this.$echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
              [
                { offset: 0, color: "#85f0f5" },
                { offset: 0.5, color: "#85f0d5" },
              ] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
            ),
          },
        },
      ],
    };
  },

  mounted() {
    this.chartPie();
    this.chartBar();
    this.chartBarFacility();
    this.chartBarSource();
  },
  methods: {
    //   综合排放分析
    chartPie() {
      let myChart = this.$echarts.init(
        document.getElementById(`chartPie${this.paneData.taskInfo.id}`)
      );
      var data = []
      this.paneData.emissionStatList.forEach((item,index)=>{
        var obj = {}
        obj.name = item.boundaryName;
         obj.value = item.emission;
           obj.itemStyle = {}

         obj.itemStyle = this.graphic[index]
         data.push(obj)
      })
  //   console.log(data)
      var option = {
        title: {
          text: "综合排放分析",
          textStyle: {
            //标题内容的样式
            color: "#000", //京东红
            fontStyle: "normal", //主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
            fontWeight: "bold", //可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
            fontFamily: "san-serif", //主题文字字体，默认微软雅黑
            fontSize: 14, //主题文字字体大小，默认为18px
          },
          left: 20,
          top: 10,
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "0",
          left: "center",
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
      };
      myChart.setOption(option);
    },
    // 综合能耗分析
    chartBar() {
      let myChart = this.$echarts.init(
        document.getElementById(`chartBar${this.paneData.taskInfo.id}`)
      );
      var option = {
        title: {
          text: "综合能耗分析",
          textStyle: {
            //标题内容的样式
            color: "#000", //京东红
            fontStyle: "normal", //主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
            fontWeight: "bold", //可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
            fontFamily: "san-serif", //主题文字字体，默认微软雅黑
            fontSize: 14, //主题文字字体大小，默认为18px
          },
          left: 20,
          top: 10,
        },
        dataset: {
          source: [
            ["score", "amount", "product"],
            [89.3, 58212, "煤"],
            [57.1, 78254, "油"],
            [74.4, 41032, "电"],
            [50.1, 12755, "气"],
            [89.7, 20145, "热"],
          ],
        },
        grid: { containLabel: true },
        xAxis: { name: "amount" },
        yAxis: { type: "category" },
        visualMap: {
          orient: "horizontal",
          left: "center",
          min: 10,
          max: 100,
          text: ["高", "低"],
          // Map the score column to color
          dimension: 0,
          inRange: {
            color: ["#38dab9", "#99ebda", "#808af6"],
          },
        },
        series: [
          {
            type: "bar",
            encode: {
              // Map the "amount" column to X axis.
              x: "amount",
              // Map the "product" column to Y axis
              y: "product",
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    // 设施
    chartBarFacility() {
      let myChart = this.$echarts.init(
        document.getElementById(`chartBarFacility${this.paneData.taskInfo.id}`)
      );
      var option = {
        title: {
          text: "设施碳排放量",
          textStyle: {
            //标题内容的样式
            color: "#000", //京东红
            fontStyle: "normal", //主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
            fontWeight: "bold", //可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
            fontFamily: "san-serif", //主题文字字体，默认微软雅黑
            fontSize: 14, //主题文字字体大小，默认为18px
          },
          left: 20,
          top: 10,
        },
        tooltip: {
          trigger: "axis",
          textStyle: {
            align: "left",
          },
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "20",
          right: "20",
          bottom: "1%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.paneData.facilitiesBar.facilitiesNames,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.paneData.facilitiesBar.emissions,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.1)",
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, //渐变色在下面修改，这里是透明度
                  [
                    {
                      offset: 0,
                      color: "rgba(147, 212, 253,.95)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(147, 212, 253,.8)",
                    },
                    {
                      offset: 1,
                      color: "rgba(147, 212, 253,.2)",
                    },
                  ]
                ),
              },
              emphasis: {
                //悬浮的渐变色在这里
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#93d4fd",
                  },
                  {
                    offset: 0.7,
                    color: "#93d4fd",
                  },
                  {
                    offset: 1,
                    color: "#93d4fd",
                  },
                ]),
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    // 排放源
    chartBarSource() {
      let myChart = this.$echarts.init(
        document.getElementById(`chartBarSource${this.paneData.taskInfo.id}`)
      );
      var option = {
        title: {
          text: "排放源碳排放量",
          textStyle: {
            //标题内容的样式
            color: "#000", //京东红
            fontStyle: "normal", //主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
            fontWeight: "bold", //可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
            fontFamily: "san-serif", //主题文字字体，默认微软雅黑
            fontSize: 14, //主题文字字体大小，默认为18px
          },
          left: 20,
          top: 10,
        },
        tooltip: {
          trigger: "axis",
          textStyle: {
            align: "left",
          },
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "20",
          right: "20",
          bottom: "1%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.paneData.boundaryBar.boundaryNames,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.paneData.boundaryBar.emissions,
            type: "bar",
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.1)",
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, //渐变色在下面修改，这里是透明度
                  [
                    {
                      offset: 0,
                      color: "rgba(147, 212, 253,.95)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(147, 212, 253,.8)",
                    },
                    {
                      offset: 1,
                      color: "rgba(147, 212, 253,.2)",
                    },
                  ]
                ),
              },
              emphasis: {
                //悬浮的渐变色在这里
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#93d4fd",
                  },
                  {
                    offset: 0.7,
                    color: "#93d4fd",
                  },
                  {
                    offset: 1,
                    color: "#93d4fd",
                  },
                ]),
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style>
</style>